<template>
  <main class="property-content">
    <section class="property-content-box">
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <component :is="Component" />
        </transition>
      </router-view>
    </section>
    <van-tabbar
      v-model="active"
      class="tabbar-box"
      :fixed="false"
      active-color="#323233"
      inactive-color="#969799"
    >
      <van-tabbar-item @click="router.push({ name: 'business' })">
        <template #icon>
          <img
            v-show="active == 0"
            src="@/assets/home_shanghu_s.png"
            alt=""
          />
          <img v-show="active != 0" src="@/assets/home_shanghu_n.png" alt="" />
        </template>
        <span :class="active == 0 ? 'activeColor' : 'inactiveColor'"
          >商户</span
        >
      </van-tabbar-item>
      <van-tabbar-item @click="router.push({ name: 'wallet' })">
        <template #icon>
          <img v-show="active == 1" src="@/assets/home_qian_s.png" alt="" />
          <img v-show="active != 1" src="@/assets/home_qian_n.png" alt="" />
        </template>
        <span :class="active == 1 ? 'activeColor' : 'inactiveColor'"
          >钱包</span
        >
      </van-tabbar-item>


    </van-tabbar>
  </main>
</template>
<script setup>
// api接口
import { useStoreApp } from "@/store";
const storeApp = useStoreApp();
const router = useRouter();
const active = computed(() => {
  return storeApp.homeActive;
});

</script>
<style lang="less" scoped>
.property-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .property-content-box {
    flex-grow: 1;
    height: 0;
    overflow-y: auto;
    // display: flex;
    // flex-direction: column;
  }
  :deep(.tabbar-box) {
    height: 110px;
    .van-tabbar-item__icon {
      margin-bottom: 12px;
      img {
        width: 60px;
        height: auto;
      }
    }
    .van-tabbar-item__text {
      // font-size: 10px;
      font-size: 20px;
    }
    .activeBg {
      background: #fedc00;
    }
    .inactiveBg {
      background: #e3e3e3;
    }
    .activeColor {
      // color: #323233;
      color: #fedc00;
    }
    .inactiveColor {
      color: #969799;
    }
    .icon-bg {
      width: 55px;
      height: 55px;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        font-size: 30px;
      }
    }
    .van-badge {
      white-space: nowrap;
      background: #f7533f;
    }
    .van-badge--top-right {
      white-space: nowrap;
    }
  }
}
</style>
